<template>
  <div class="header">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="javascript:;bs-example-navbar-collapse-1" aria-expanded="false" @click="navShow=!navShow">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="javascript:;">
            <img height="72" alt="Brand" src="../assets/images/logo.png">
          </a>
        </div>
        <div class="navbar-collapse" id="bs-example-navbar-collapse-1" v-show="navShow||isPc">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <router-link to="/index" :class="{'active':$route.path=='/index'}">首页</router-link>
            </li>
            <li>
              <router-link to="/course" :class="{'active':$route.path=='/index'}">课程</router-link>
            </li>
            <li>
              <router-link to="/expert" :class="{'active':$route.path=='/index'}">专家</router-link>
            </li>
            <li>
              <router-link to="/meeting" :class="{'active':$route.path=='/index'}">会议</router-link>
            </li>
            <li>
              <router-link to="/resource" :class="{'active':$route.path=='/index'}">共享资源</router-link>
            </li>
            <li>
              <router-link to="/my" :class="{'active':$route.path=='/index'}">我的科工</router-link>
            </li>
            <li>
              <!-- /user/getUser    -->
              <template v-if="userInfo">
                <div class="dropdown">
                  <a href="javascript:;" class="user dropdown-toggle">
                    <img width="40" height="40" :src="'https://kegonghui.oss-cn-beijing.aliyuncs.com/'+userInfo.headimg+'?x-oss-process=image/circle,r_100'" alt="..." class="img-circle"> {{userInfo.nickname}}
                  </a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="javascript:;" @click="handleLogOut()">退出</a>
                    </li>
                  </ul>
                </div>
              </template>
              <template v-else>
                <a href="javascript:;" class="user" @click="handleLoginChange(2)">
                  注册
                  <!-- <img width="40" height="40" src="../assets/images/a.jpg" alt="..." class="img-circle"> 梁老师 -->
                </a>/
                <a href="javascript:;" class="user" @click="handleLoginChange(1)">
                  登录
                </a>
              </template>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import Cookies from "js-cookie";
export default {
  name: "common-header",
  data () {
    return {
      navShow: false,
      isPc: true,
      downMenuShow: false
    };
  },
  created () {
    this.isPc = this.userAgent() ? true : false;
  },
  watch: {
    $route () {
      this.navShow = false;
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo;
    }
  },
  methods: {
    handleLoginChange (type) {
      this.$store.dispatch("handleLoginTypeChange", type);
      this.$store.dispatch("handleLoginBoxChange", true);
    },
    userAgent () {
      var userAgentInfo = navigator.userAgent;
      var Agents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod"
      ];
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    handleLogOut () {
      Cookies.remove("userinfo");
      location.reload();
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  .navbar-default {
    border: none;
    background: #ffffff;
  }
  .navbar-brand img {
    margin-top: 5%;
    height: 80%;
  }
  .nav > li > a.user {
    display: inline-block;
  }
  .nav .open > a,
  .nav .open > a:focus,
  .nav .open > a:hover {
    background-color: transparent;
  }
  .user {
    display: inline-block;
    padding: 15px;
  }
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-nav > li > a:hover {
    color: #0092dc;
  }
}
.dropdown:hover .dropdown-menu {
  display: block;
}
</style>
